<template>
  <div>
    <div class="login-container">
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top" label-width="0px" class="card-box login-form">
        <div class="login-header">
          <h1 class="login-main-title login-hide">冷云设备验证系统</h1>
        </div>
        <el-form-item prop="username">
          <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleSubmit('loginForm')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:45%;" class="login-button" @click.native.prevent="handleSubmit('loginForm')" :loading="logining">登录</el-button>
          <el-button type="warning" style="width:45%; float:right;" class="login-button " :loading="logining">注册</el-button>
        </el-form-item>
        <template>
          <div class="login-footer">
            <p>Copyright © 2010 - 2018 数点测控 版权所有</p>
          </div>
        </template>
      </el-form>

    </div>
  </div>
</template>
<script>
import NProgress from "nprogress";
import { setToken } from "@/utils/auth";
import { mapMutations } from "vuex";

export default {
  name: "login",
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      } else {
        if (value.trim() === "") {
          return callback(new Error("请不要只输入空格"));
        }
        callback();
      }
    };
    return {
      logining: false,
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      loading: false,
      pwdType: "password"
    };
  },
  methods: {
    ...mapMutations(["SET_TOKEN"]),
    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true;
          NProgress.start();
          let loginParams = {
            username: this.loginForm.username,
            password: this.loginForm.password
          };
          this.axios
            .post("/accounts/signin", loginParams)
            .then(response => {
              this.logining = false;
              NProgress.done();
              let { data, status } = response.data;
              if (status === 0) {
                this.$message({
                  message: "欢迎",
                  type: "success"
                });

                let { access_token } = data;
                setToken(access_token);
                this.SET_TOKEN(access_token);

                this.$router.push({
                  path: "/Main"
                });
              } else {
                this.$message({
                  message: "Unauthorized",
                  type: "warning"
                });
              }
            })
            .catch(err => {
              console.log(err);
              this.logining = false;
              this.$message({
                message: "服务器通信故障，请检查网络连接是否正常",
                type: "warning"
              });
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background: url(../../assets/bg.jpg);

  .login-header {
    font-size: 14px;
    color: #47748e;
    margin: 0px auto 32px auto;
    h1 {
      text-align: center;
      font-family: "微软雅黑";
      font-weight: 200;
    }
  }
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 20px 35px 15px 35px;
    margin: 150px auto;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
    border-top: 5px solid;
    border-image: linear-gradient(90deg, #4481eb, #04befe)30 30;
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    user-select: none;
  }
  .thirdparty-button {
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
  .el-button {
    box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
  }
}
.login-footer {
  position: relative;
  font-size: 12px;
  text-align: center;

  user-select: none;
  border-top: 1px #d4dbf7 solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  a {
    color: #c000;
    text-decoration: none;
  }
  a:hover {
    color: red;
    cursor: hand;
  }
  p {
    padding: 0;
    margin-top: 20px;
  }
}
</style>
